<template>
	<div class="hello_detail">
		<div class="detail_title clearfix">
			<span @click="goBack" class="left">返回</span>
			<div>订单详情</div>
		</div>
		<div class="order_time">
			<div>你的订单在3月28日支付成功</div>
			<div class="pay_time">2018-03-28 13:28:23</div>
		</div>
		<div class="detail_data clearfix">
			<div class="clearfix">
				<div class="left">赛事名称</div>
				<div class="right">详情></div>
			</div>
			<div>姓名：张三</div>
			<div>赛事组别：5级组(￥200)</div>
			<div class="clearfix">
				<div class="left">参赛方式：个人赛</div>
				<button class="right resive">修改</button>
			</div>
			<div>审核状态：等待审核</div>
			<div>住宿：￥550/3天</div>
			<div>餐饮：￥550/3天</div>
			<button class="refund right" @click="goRefund">退款</button>
		</div>
		<div class="pay_rel">
			<span>实付款</span>
			<span class="right pay_really">￥300.00</span>
		</div>
		<div class="line_cu"></div>
		<div class="order_stay">
			<div>
				<span>订单状态：</span>已支付
			</div>
			<div>
				<span>订单编号：</span>24934829
			</div>
			<div>
				<span>下单时间：</span>2018-03-28 13:28:23
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		methods:{
			goBack:function(){
				this.$router.push({path:'/total'})
			},
			goRefund:function(){
				this.$router.push({path:'/refund'})
			}
		}
	}
</script>

<style>
	html,body{
		font-size: 0.3rem;
		margin: 0;
		padding: 0;
	}
.clearfix:after{
	clear: both;
	content:'' ;
	display: block;	
}
.left{
	float:left
}
.right{
	float:right
}
.detail_title{
	background: #4682B4;
	font-size: 0.4rem;
	color: #fff;
	padding: 20px ;
	
}
.detail_title>div{
	text-align: center;
}
.order_time{
	padding: 20px;
	border-bottom: 1px solid #ccc;
}
.pay_time{
	font-size: 0.2rem;
	color: #ccc;
	margin-top: 10px;
}
.detail_data{
	border-bottom: 1px solid #ccc;
}
.detail_data>div{
	padding: 10px;
}
/*.resive{
	text-align: right;
}*/
.refund{
	margin-right: 10px;
	margin-bottom: 10px;
	border-radius: 5px;
	background: #f2f2f2;
	padding: 8px 20px;
	border:1px solid #ccc
}
.pay_rel{
	padding: 20px;
}
.line_cu{
	height: 5px;
	background: #ccc;
	width: 100%;
}
.order_stay>div{
	padding: 10px;
}
.order_stay>div>span{
	color: #ccc;
}
.pay_really{
	color: red;
}
</style>